<template>
    <div class="cart-container">
      <el-card class="box-card">
          <h2 style="display: flex; justify-content: center;">收藏夹</h2>

          <!-- 多选操作 -->
          <div class="top-opearations">
            <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
            <el-button style="width: 100px ;margin-left: 20px;" type="danger" size="small" @click="removeSelectedItems">删除选中商品</el-button>
          </div>

          <!-- 数据加载中提示 -->
          <div v-if="loading" class="text-center text-gray-500">Loading...</div>
  
          <!-- 错误提示 -->
          <div v-else-if="error" class="text-center text-red-500">Failed to load cart data: {{ error }}</div>
          
        
          <!-- 收藏夹内容 -->
          <div v-else>
          <el-divider :border-style="'solid'"></el-divider>
          <div v-for="item in cartItems" :key="item.goodId" class="space-y-6">
              <div class="shopping-cart-item">
              <!-- 选择框 -->
              <el-checkbox v-model="selectedItems" :label="item.goodId" />
              <!-- 商品图片 -->
              <el-image
                  class="image"
                  :src="item.imageUrl"
                  :alt="item.name"
                  fit="contain"
              />
              <div class="detail-item">
              <div class="info-item">
                  <div class="name-item"><p class="text-base font-medium text-gray-900 truncate">{{ item.name }}</p></div>
              <div class="price-item">
                  <!-- 商品信息 -->
              <div class="flex-1 space-y-2 md:ml-6">
                  <p class="text-sm text-gray-500">单价: ￥{{ item.price.toFixed(2) }}</p>
              </div>

              </div>    
              </div>
              
              <div class="operations">
              <!-- 操作按钮 -->
                  <el-button type="text" size="small" @click="removeItem(item.goodId)" style="margin-top: 60px;margin-right: 150px;">删除
                  </el-button>
              </div>
              </div>
              </div>
              <el-divider :border-style="'solid'"></el-divider>
          </div>
          </div>
      </el-card>
    </div>
</template>


<script>
import { removeFromFav} from "@/apis/fav_pac";
import { useUserStore } from "@/stores/user";

export default {
  props: {
    cartItems: Array,
    loading: Boolean,
    error: String,
  },
  data() {
    return {
      selectedItems: [], // 选中的商品 goodId 列表
      selectAll: false, // 全选状态
    };
  },
  watch: {
    // 同步全选状态
    selectAll(val) {
      this.selectedItems = val ? this.cartItems.map((item) => item.goodId) : [];
    },
    // 同步 selectedItems 和 cartItems 的变化
    selectedItems(val) {
      this.selectAll = val.length === this.cartItems.length;
    },
  },
  setup() {
    const userStore = useUserStore();
    const userId = userStore.userAInfo.userId; // 从 Pinia 获取 userId
    return {
      userId,
    };
  },
  methods: {
    // 单个商品从收藏夹中删除
  async removeItem(goodId) {
    try {
      if (!this.userId) throw new Error("Customer ID not found.");
      await removeFromFav([goodId], this.userId);
      this.$message.success("Item removed from favorites.");
      this.$emit("update-fav");
    } catch (err) {
      this.$message.error(err.message || "Failed to remove item from favorites.");
    }
  },

  // 批量删除选中的商品
  async removeSelectedItems() {
    if (this.selectedItems.length === 0) {
      this.$message.warning("Please select at least one item.");
      return;
    }
    try {
      if (!this.userId) throw new Error("Customer ID not found.");
      await removeFromFav(this.selectedItems, this.userId);
      this.$message.success("Selected items removed from favorites.");
      this.$emit("update-fav");
    } catch (err) {
      this.$message.error(err.message || "Failed to remove selected items from favorites.");
    }
  },

  },
};
</script>


<style scoped>
/* 添加自定义样式 */
.cart-container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  height: 100%;
}

.box-card{
  width: 80%;
  justify-content: center;
}
.top-operations{
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  /* align-items: center; */
}
.shopping-cart-item {
  width: 100%;
  height: 20%;
  margin-bottom: 20px;
  display: flex;
  /* background-color: aqua; */
}
.detail-item{
  display: flex;
  width: 100%;
  /* flex-direction: column; */
  margin-left: 50px;
  /* background-color: blanchedalmond; */
}
.info-item{
  width: 100%;
  margin-left: 80px;
  /* background-color: aqua; */
}
.name-item{
  width: 100%;
  margin-top: 30px;
  /* background-color: cadetblue; */
}
.price-item{
  margin-left: 25px;
  margin-top: 40px;
  font-size: small;

  /* background-color: bisque */
}
.number{
  margin-left: 80px;
  margin-top: 80px;
}
/* .operations{
  margin-top: 80px;
  margin-left: 80px;
  display: flex;
} */
.image{
  width: 200px;
  margin-left: 50px;
  border-radius: 10%;
}
</style>
